<template> <!-- vue实例外创建 -->
    <div>
        <div class="content">
            <el-input v-model="keywords"></el-input>
            <el-button type="primary" @click="Search()" :loading="searchLoading">搜索</el-button>
        </div>
        <!-- 播放 -->
        <div class="SongPlay">
            <audio :src="SongURL" :autoplay="true" :loop="false" :controls="true" />
        </div>

        <!-- 歌曲列表 -->
        <div class="SongList">
            <el-table :data="SongsList" style="width: 100%" v-loading="tableLoading">
                <el-table-column prop="pic" label="专辑" width="200">
                    <template slot-scope="scope">
                        <img style="width: 60px;height: 60px;" :key="scope.row.id" :src="getAlbumPic(scope.row)" alt="">
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="歌曲" width="200">
                </el-table-column>
                <el-table-column label="歌手" width="220">
                    <template slot-scope="scope">
                        <span>{{ getArtistsName(scope.row) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="alia" label="来自" width="200">
                </el-table-column>
                <el-table-column prop="" label="操作" width="180">
                    <template slot-scope="scope">
                        <i class="el-icon-headset" @click="play(scope.$index, scope.row)"></i>
                        <i class="el-icon-download"></i>
                        <i class="el-icon-chat-dot-round" @click="commend(scope.$index, scope.row)"></i>
                        <i class="el-icon-video-play" @click="Mv(scope.$index, scope.row)"></i>
                    </template>
                </el-table-column>
            </el-table>

        </div>

    </div>
</template>
<!-- 调用   <mycom></mycom> -->
<script>
import { Search, GetMusic } from '../api/search'

export default {
    data() {
        return {
            keywords: '',
            SongsList: [],
            tableLoading: false,    // 表格loading状态
            SongURL: '',
            id: '',
        }
    },
    methods: {
        async Search() {
            if (this.keywords == '') {

                return this.$message({
                    message: '请输入搜索内容',
                    type: 'warning'
                });
            }
            // 开启loading状态
            this.searchLoading = true;
            this.tableLoading = true;
            try {
                let res = await Search({ keywords: this.keywords });
                this.SongsList = res.result.songs
                console.log(res)
            } catch (error) {
                console.log('搜索失败')
                this.$message({
                    message: '搜索失败，请重试',
                    type: 'error'
                });
                this.SongList = []
            } finally {

                // 关闭loading状态
                this.tableLoading = false;
                this.searchLoading = false;

            }



        },
        //获取歌手名字
        getArtistsName(song) {
            if (song.ar && Array.isArray(song.ar)) {
                return song.ar.map(artist => artist.name).join(' / ')
            }
            return '未知'
        },
        // 获取专辑图片
        getAlbumPic(song) {
            // 网易云音乐API中专辑图片通常在album.picUrl中
            if (song.al && song.al.picUrl) {
                return song.al.picUrl
            }
            return '' // 如果没有图片，返回空字符串
        },
        async play(index, row) {
            let res = await GetMusic({ id: row.id })
            // console.log(res.data[0].url)
            this.SongURL = res.data[0].url

        },

        //Mv
        async Mv(index, row) {
            this.id = row.id
            // console.log(this.id)
            this.$router.push({
                path: '/mv',
                query: {
                    id: this.id,
                }
            })
        },
        commend(index, row) {
            // console.log(row.id)
            this.$router.push({
                path: '/comment',
                query: {
                    id: row.id,
                    type: 1
                }
            })
        }
    },
    mounted() {
        // console.log(this.$route.query)
        this.keywords = this.$route.query.keywords

        this.Search()

    },
}
</script>
<style lang="css" scoped>
.content {
    width: 30%;
    height: 50%;
    margin: 5% auto;
    background-color: #e5e3e3;
    border: 3px solid rgba(172, 166, 166, 0.1);
    box-shadow: 30px 10px 10px rgba(221, 5, 5, 0.1);
    display: flex;
}

.SongList {
    width: 60%;
    height: 50%;
    margin: 0 auto;
    background-color: red;
}

.el-icon-headset {
    scale: 1.5;
    margin-right: 20px
}

.el-icon-download {
    scale: 1.5;
    margin-right: 20px
}

.el-icon-chat-dot-round {
    scale: 1.5;
    margin-right: 20px;
}

.el-icon-video-play {
    scale: 1.5;
}

.SongPlay {
    width: 100%;
    display: flex;
    justify-content: center;

    audio {
        width: 600px;
    }
}
</style>